<template>
  <section class="sp-report" style="display: none;">
    <!-- header -->
    <!-- 这个之前写好了 -->
    <header class="sp-report__header"></header>
    
    <!-- 总体结果 -->
    <div class="sp-report__module">
      <!-- 大类型标题 -->
      <div class="sp-report__title">
        <h2>总体结果</h2>
        <img src="" alt="">
      </div>

      <!-- 用户信息 -->
      <!-- 这个之前写好了 -->
      <div class="sp-report__user"></div>

      <!-- 类型解析 -->
      <div class="sp-report__boxes">
        <div class="sp-report__boxes-title">
          类型解析
        </div>
        <div class="sp-report__item">
          <div class="sp-report__item-info">
            <div class="sp-report__item-desc">
              <p>
                你是完美主义者。只要是你感兴趣的事物，你就有着永⽆⽌境的动⼒和能⼒去改盖他们和理想主义者不同的是，你会通过实事求是的实⽤主义理念和⾏动来追求完美的结果。
              </p>
              <p>
                你是天⽣的谋略家，具有独特的思想、伟⼤的远⻅和梦想。你天⽣精于理论，对于复杂而综合的概念运转灵活。你是优秀的战略思想家，通常能清楚地看到任何局势的利处和缺陷。对于感兴趣的问题，你是很好的、具有远⻅和⻅解的组织者。如果你形成⾃⼰的看法和计划，你会投⼊不可思议的专⼼、注意⼒和能量、积极性。依靠超过⾃⼰的⾼标准的决⼼和坚韧不拔，你能获得许多成就。
              </p>
            </div>
          </div>
        </div>
      </div>

      <!-- 维度详解 -->
      <div class="sp-report__boxes">
        <div class="sp-report__boxes-title">
          维度详解
        </div>
        <div class="sp-report__list">
          <div class="sp-report__item" v-for="item in 3" :key="item">
            <!-- 文本 -->
            <div class="sp-report__item-info">
              <div class="sp-report__item-desc">
                <p>
                  内 向 者 倾 向 于 思 想 、 记 忆 和 情感。倾向于⾃省，喜欢书写的形式与⼈交流：善于独⾃学习，喜欢在安静的环境中⼯作，可以⻓期的从事⼀项⼯作； 被认为是沉思的、安静的神秘的、难懂的。
                </p>
              </div>
            </div>
            <!-- 图片 -->
            <div class="sp-report__item-info">
              <img />
            </div>
          </div>
        </div>
      </div>

      <!-- 类型占比 -->
      <div class="sp-report__boxes">
        <div class="sp-report__boxes-title">
          你的类型占比
        </div>
        <ul class="sp-report__rows">
          <li v-for="item in 4" :key="item">
            <img src="" alt="" />
            <span>人名</span>
          </li>
        </ul>
      </div>
      
      <!-- 同类 -->
      <div class="sp-report__boxes">
        <div class="sp-report__boxes-title">
          你与他们是一类人
        </div>
        <ul class="sp-report__rows">
          <li v-for="item in 4" :key="item">
            <img src="" alt="" />
            <span>人名</span>
          </li>
        </ul>
      </div>

      <!-- 价值观与动机 -->
      <div class="sp-report__boxes">
        <div class="sp-report__boxes-title">
          价值观与动机
        </div>
        <div class="sp-report__item">
          <div class="sp-report__item-info">
            <div class="sp-report__item-desc">
              <p>
                你思维严谨、有逻辑性、⾜智多谋，你能够看到新计划实⾏后的结果和⽣活中转变为真实物质的理论体系。你对⾃⼰和别⼈都很苛求，往往⼏乎同样强硬地逼迫别⼈和⾃⼰。你并不⼗分受冷漠与批评的⼲扰，作为所有性格类型中最独⽴的你更喜欢以⾃⼰的⽅式⾏事。⾯对相反意⻅，你通常持怀疑态度，⼗分坚定和坚决。权威本⾝不能强制你遵守规则，只有你认为这些规则对⾃⼰的更重要的⽬标有⽤时，才会去遵守。
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 性格特点 -->
    <div class="sp-report__module">
      <!-- 性格特点 -->
      <div class="sp-report__title">
        <h2>性格特点</h2>
        <img src="" alt="">
      </div>
      <div class="sp-report__item">
        <div class="sp-report__item">
          <div class="sp-report__item-info">
            <h2>你的缺点</h2>
            <div class="sp-report__item-desc"></div>
          </div>
        </div>
        <div class="sp-report__item">
          <div class="sp-report__item-info">
            <h2>你的缺点</h2>
            <div class="sp-report__item-desc"></div>
          </div>
        </div>
      </div>
      <div class="sp-report__item-info">
        <h2>你的缺点</h2>
        <div class="sp-report__item-desc"></div>
      </div>
    </div>

    <!-- 人际风格 -->
    <div class="sp-report__module">
      <!-- 人际风格 -->
      <div class="sp-report__title">
        <h2>人际风格</h2>
        <img src="" alt="">
      </div>
      <div class="sp-report__item">
        <div class="sp-report__item-info">
          <h2>你的领导风格</h2>
          <div class="sp-report__item-desc"></div>
        </div>
      </div>
      <div class="sp-report__item">
        <div class="sp-report__item-info">
          <h2>作为同事的你</h2>
          <div class="sp-report__item-desc"></div>
        </div>
      </div>
      <div class="sp-report__item-info">
        <h2>作为下属的你</h2>
        <div class="sp-report__item-desc"></div>
      </div>
    </div>

    <!-- 职业发展建议 -->
    <div class="sp-report__module">
      <div class="sp-report__title">
        <h2>职业发展建议</h2>
        <img src="" alt="">
      </div>
      <!-- 喜欢的工作风格 -->
      <div class="sp-report__boxes" v-for="item in 5">
        <div class="sp-report__boxes-title">喜欢的工作风格</div>
        <div class="sp-report__item">
          <div class="sp-report__item-info">
            <ul>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!-- 评测声明 -->
    <div class="sp-report__module">
      <div class="sp-report__title">
        <h2>评测声明</h2>
        <img src="" alt="">
      </div>
      <!-- 喜欢的工作风格 -->
      <div class="sp-report__boxes">
        <div class="sp-report__item">
          <div class="sp-report__item-info">
            <ul>
              <li></li>
              <li></li>
              <li></li>
            </ul>
          </div>
        </div>
      </div>
    </div>

  </section>
</template>

<style lang="scss" scoped>
@import './style.scss';
</style>
